import ProLayout from "@ant-design/pro-layout";
import { LogoutOutlined, GlobalOutlined } from "@ant-design/icons";
import React, { PropsWithChildren, useMemo, useState } from "react";
import { useIntl, setLocale, getLocale } from "@/i18next/method";
import { Link, useNavigate } from "react-router-dom";
import { ThemeProvider, Dropdown } from "@supcon/supcon-5t-design";
import { useModel } from "@supcon/supcon-microapp";
import { AuthProvider } from "@supcon/supcon-5t-auth";
import { __getRootElement } from "@/renderer";
import { GlobalProvider } from "@/models/global";
import zh_CN from "@supcon/supcon-5t-design/dist/es/components/locale/zh_CN";
import en_US from "@supcon/supcon-5t-design/dist/es/components/locale/en_US";

interface IProps {
  route: any;
  routes: any;
}

const BasicLayout: React.FC<PropsWithChildren<IProps>> = (props) => {
  const navigate = useNavigate();
  const { t } = useIntl();
  const { children } = props;
  // const salveModel: any = useModel(qiankunStateFromMasterModelNamespace);
  const [language, setLanguage] = useState<string>(getLocale() || "zh-CN");
  // const { theme } = useMemo(() => {
  //   let theme: DesignThemeMode = "darkBlue";
  //   if (salveModel && salveModel.theme) {
  //     theme = salveModel.theme;
  //   }
  //   return { theme };
  // }, [salveModel]);
  const antdLocale = useMemo(() => {
    if (language === "zh-CN") {
      return zh_CN;
    } else if (language === "en-US") {
      return en_US;
    } else {
      return zh_CN;
    }
  }, [language]);
  const LangDom = (
    <>
      <Dropdown
        placement="topRight"
        menu={{
          items: [
            {
              key: "zh-CN",
              label: "中文",
              onClick: () => {
                setLocale("zh-CN");
                setLanguage("zh-CN");
              },
            },
            {
              key: "en-US",
              label: "English",
              onClick: () => {
                setLocale("en-US");
                setLanguage("en-US");
              },
            },
          ],
        }}
      >
        <GlobalOutlined></GlobalOutlined>
      </Dropdown>
    </>
  );
  const route = useMemo(() => {
    let childArr: any[] = [];
    const getRoutes = (arr: any[]) => {
      arr.forEach((item) => {
        if (item.absPath === props.route.absPath) {
          childArr = item.children;
        } else {
          if (item.children) getRoutes(item.children);
        }
      });
    };
    getRoutes(props.routes);
    return {
      ...props.route,
      routes: childArr,
    };
  }, [props.route, props.routes]);
  return (
    <div style={{ backgroundColor: "#fff", height: "100vh" }}>
      <ProLayout
        route={route}
        onMenuHeaderClick={() => navigate("/layout")}
        menuDataRender={(routes) => {
          return routes;
        }}
        menuItemRender={(menuItemProps, defaultDom) => {
          if (
            menuItemProps.isUrl ||
            menuItemProps.children ||
            !menuItemProps.path
          ) {
            return defaultDom;
          }
          return <Link to={menuItemProps.path}>{defaultDom}</Link>;
        }}
        title="5T React Pro"
        menu={{
          collapsedShowGroupTitle: true,
        }}
        avatarProps={{
          src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
          size: "small",
          title: "Admin",
          render: (props, dom) => {
            return (
              <Dropdown
                menu={{
                  items: [
                    {
                      key: "logout",
                      icon: <LogoutOutlined />,
                      label: t("navBar.logout"),
                    },
                  ],
                }}
              >
                {dom}
              </Dropdown>
            );
          },
        }}
        actionsRender={() => {
          return [LangDom];
        }}
        token={{
          colorBgAppListIconHover: "rgba(0,0,0,0.06)",
          colorTextAppListIconHover: "rgba(255,255,255,0.95)",
          colorTextAppListIcon: "rgba(255,255,255,0.85)",
          sider: {
            colorBgCollapsedButton: "#fff",
            colorTextCollapsedButtonHover: "rgba(0,0,0,0.65)",
            colorTextCollapsedButton: "rgba(0,0,0,0.45)",
            colorMenuBackground: "#004FD9",
            colorBgMenuItemCollapsedElevated: "rgba(0,0,0,0.85)",
            colorMenuItemDivider: "rgba(255,255,255,0.15)",
            colorBgMenuItemHover: "rgba(0,0,0,0.06)",
            colorBgMenuItemSelected: "rgba(0,0,0,0.15)",
            colorTextMenuSelected: "#fff",
            colorTextMenuItemHover: "rgba(255,255,255,0.75)",
            colorTextMenu: "rgba(255,255,255,0.75)",
            colorTextMenuSecondary: "rgba(255,255,255,0.65)",
            colorTextMenuTitle: "rgba(255,255,255,0.95)",
            colorTextMenuActive: "rgba(255,255,255,0.95)",
            colorTextSubMenuSelected: "#fff",
          },
        }}
      >
        <GlobalProvider
          value={{
            language,
          }}
        >
          <ThemeProvider
            // themeMode={theme}
            themeMode="darkBlue"
            container={__getRootElement().parentElement}
            locale={antdLocale}
          >
            <AuthProvider
              useModel={useModel}
              menuList={[
                {
                  name: "add",
                  status: 0,
                },
                {
                  name: "delete",
                  status: 1,
                },
              ]}
            >
              {children}
            </AuthProvider>
          </ThemeProvider>
        </GlobalProvider>
      </ProLayout>
    </div>
  );
};

export default BasicLayout;
